<template>
  <div id="app">
    <!-- 父传子：父传子属性
       父组件传：在子组件标签上定义一个属性   属性名=值
       子组件收: props: ['属性名'] 
       子传父：子触发父方法
        父定义：@子组件方法名=父组件方法
        子触发：this.$emit("子组件方法名",参数)   
     props传递的值是单向数据流（不修改栈的值，堆的值随便修改）
     1:原始值（number,string,undefined,null,boolean）传递过来后，不能修改
     2：引用值传递过去后，只要不修改它的引用(不修改栈的值，堆的值随便修改)，它是可以修改的     
    
     -->
    <div class="box">{{ xxx }}</div>
    <HelloWorld msg="hello 57" :xxx="xxx" @sonFun="fatherFun" />
    <hr />
    <div class="sonArea">
      <!-- <son :value="appValue" @input="changeValue"></son> -->
      <!-- 语法糖
      1：props传参的参数名一定要是value
      2:绑定的事件一定要是input事件
        input事件一定要做一件事情 ：收到参数，修改value对应的值为该参数的值
       -->
      <son v-model="appValue"></son>
    </div>
    <h3>上传组件</h3>
    <!-- 回显： 图片路径，你帮我显示出来

 -->

    <!-- <hmupload :value="imgSrc" @input="changeImg"></hmupload> -->
    <hmupload v-model="imgSrc1"></hmupload>
    <hmupload v-model="imgSrc2"></hmupload>
    <hmupload v-model="imgSrc3"></hmupload>
    <hmupload v-model="imgSrc4"></hmupload>
    <hmupload v-model="imgSrc5"></hmupload>
    <hmupload v-model="imgSrc6"></hmupload>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import son from './components/son'
import hmupload from './components/hmupload'
export default {
  name: 'App',
  components: {
    HelloWorld,
    son,
    hmupload
  },
  data () {
    return {
      xxx: {
        a: 1,
        b: 2,
        c: 3
      },
      appValue: 123456,
      imgSrc1: '',
      imgSrc2: '',
      imgSrc3: '',
      imgSrc4: '',
      imgSrc5: '',
      imgSrc6: ''
    }
  },
  methods: {
    fatherFun (msg) {
      alert(msg)
    }
    // changeValue (num) {
    //   this.appValue = num
    // }
    // changeImg (img) {
    //   this.imgSrc = img
    // }
  }
}
</script>

<style>
.box,
.sonArea {
  width: 300px;
  height: 300px;
  border: 2px solid red;
}
</style>
